<template>
	<view class="center">
		<view class="logo">
			<view @click="dispatchFunc({ route: '/pages/tabbar/mine/personal/index' })" class="user_info">
				<image  class="logo-img" :src="userData.avatarUrl"></image>
				<view class="user_info-right">
					<text class="user-name">{{ userData.name }}</text>
				</view>
			</view>
			<view class="canvas-pan"><canvas class="canvas-pan" :style="{ width: canvasSetting.width, height: canvasSetting.height }" canvas-id="firstCanvas"></canvas></view>
		</view>
		<view class="mine-links">
			<block v-for="(item, index) in studyPanel" :key="index">
				<navigator :url="item.route" class="mine-links-btn mine-links-history" hover-class="none">
					<text>{{ item.title }}</text>
				</navigator>
				<text v-if="index < studyPanel.length - 1" class="line">|</text>
			</block>
		</view>
		<view class="center-list" v-for="(segmentItem, segmentIndex) in listPanel" :key="segmentIndex">
			<view @click="dispatchFunc(item)" class="center-list-item" v-for="(item, index) in segmentItem" :key="index">
				<image class="list-icon" mode="widthFix" :src="item.icon"></image>
				<text class="list-text">{{ item.title }}</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

import { uniRate } from '@dcloudio/uni-ui';
import mixins from '@/mixins/index';
import messageBadgeEvent from '@/mixins/event/messageBadgeEvent';
import MineService from '@/services/mine/index';
const mineService = new MineService();
import sugarCallBack from '@/libs/sugar/callback/index';

const { judgeCallBack } = sugarCallBack;

export default {
	components: { uniRate },
	mixins: [mixins, messageBadgeEvent],
	data() {
		return {
			messageBadgeIndex: 0,
			canvasSetting: {
				height: uni.upx2px(284),
				width: uni.upx2px(568),
				fontSize: uni.upx2px(60),
				textHeight: uni.upx2px(220),
				distance: uni.upx2px(16),
				id: 'firstCanvas'
			},
			avatarUrl: '/static/img/qq.png',
			context: undefined,
			//rateNum:2,
			studyPanel: [],
			listPanel: []
		};
	},
	computed: {
		// segmentList(){
		//     return [this.roleMenu];
		// }
	},
	methods: {
		msgCenter(){
			uni.navigateTo({
				url:'/pages/message/outMsgList'
			})
		},
		goLogin() {
			if (!this.hasLogin) {
				uni.navigateTo({
					url: '/pages/system/login/index'
				});
			}
		},
		dispatchFunc(item) {
			if (item.route != undefined) {
				uni.navigateTo({
					url: item.route
				});
				return;
			}
			switch (item.code) {
				case 'clearGuild':
					this.clearSplash();
					break;
				case 'logout':
					this.logout();
					break;
			}
		},
		clearSplash() {
			uni.setStorage({
				key: 'launchFlag',
				data: false
			});
			uni.showToast({
				title: '清除引导页状态成功',
				duration: 2000,
				success: function() {
					uni.navigateTo({
						url: '/pages/index/guide'
					});
				}
			});
		},
		drawDashBoard(percentage = 50.0, timeIndex = 1) {
			const { distance, id, width: canvasWidth, height: canvasHeight, fontSize, textHeight } = this.canvasSetting;
			if (!this.context) {
				this.context = uni.createCanvasContext(id);
			}
			const context = this.context;

			/*
                画文字
                 */
			context.setFontSize(fontSize);
			const processtext = parseInt(percentage) + '%';
			let processtextLength = context.measureText(processtext).width;
			//console.log('processtextLength:',processtextLength)
			if (processtextLength == 0) {
				processtextLength = canvasWidth / 5;
			}
			const countTextCenter = (canvasWidth - processtextLength) / 2;

			if (timeIndex == 1) {
				let bgPan = '/static/img/mine/pan-bg.png';
				// #ifdef APP-PLUS
				bgPan = '/static/img/mine/pan-bg-app.png';
				// #endif
				//context.globalAlpha = 0.2
				context.drawImage(bgPan, 0, 0, canvasWidth, canvasHeight);

				context.setFillStyle('#fff');
				context.fillText(processtext, countTextCenter, textHeight);
				context.draw();
			}
			const lineWidth = canvasWidth * 1 / 6.5;
			context.lineWidth = lineWidth;
			const eAngle = (percentage / 100.0 + 1) * Math.PI;
			const radius = canvasWidth / 2 - lineWidth / 2 - distance / 2 - uni.upx2px(10);
			context.beginPath();
			context.arc(canvasWidth / 2, canvasHeight, radius, Math.PI, eAngle, false);
			//context.strokeStyle = '#0ba4ff';
			context.strokeStyle = 'rgba(11,164,255,0.4)';
			context.stroke();
			//context.beginPath();

			context.draw(true);
		},
		showDashBoard(percentage, callback) {
			//let percentage = Math.floor(Math.random() * (100 - 0)) + 0;
			this.drawDashBoard(percentage);
			//     if (callback!=undefined && typeof callback == 'function'){
			//                callback();
			//     }
			//    const times = 20;
			//    let timeIndex = 1;
			//    //const rateSeconds = timeout/times;
			//    const process =  setInterval(()=>{
			//        if (timeIndex<=times){
			//            const mapPercentage = percentage * timeIndex / times
			//            this.drawDashBoard(mapPercentage,timeIndex);
			//            timeIndex++;
			//        }else{
			//            clearInterval(process);
			//            if (callback!=undefined && typeof callback == 'function'){
			//                callback();
			// 			}
			//        }
			//    },50)
		},
		getMinePanel(callback) {
			const $this = this;
			mineService.getMinePanel({ roleType: this.userData.roleType }).then(resultDto => {
				judgeCallBack(callback);
				const { success, result } = resultDto;
				if (success) {
					//   $this.title = result.title;
					//   $this.desc = result.desc;
					//   $this.info = result.info;
					//   $this.personalInfo = result.personalInfo;
					const { accuracy, studyPanel, listPanel } = result;
					this.showDashBoard(accuracy);
					$this.studyPanel = studyPanel;
					$this.listPanel = [listPanel];
				}
			});
		}
	},
	onReady() {},
	onPullDownRefresh() {
		//this.rateNum = 3
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		//this.showDashBoard(()=>uni.stopPullDownRefresh());
		this.getMinePanel(() => uni.stopPullDownRefresh());
	},
	onLoad() {
		this.getMinePanel();
	},
	//点击导航栏 buttons 时触发
	onNavigationBarButtonTap(e) {
		const index = e.index;
		if (index === 1) {
			uni.navigateTo({
				url: '/pages/system/settings/index'
			});
		} else if (index === 0) {
			this.clickMessage();
		}
	}
};
</script>

<style lang="less">
@font-face {
	font-family: texticons;
	font-weight: normal;
	font-style: normal;
	src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
}

page,
view {
	display: flex;
}

page {
	background-color: #f8f8f8;
}

.center {
	flex-direction: column;
}
.statusBar {
	width: 750upx;
	height: 128upx;
	background-color: #377cfd;
}
.logo {
	width: 750upx;
	height: 475upx;
	padding: 20upx 40upx;
	box-sizing: border-box;
	background-color: #377cfd;
	flex-direction: column;
	align-items: center;
}

.logo-hover {
	opacity: 0.8;
}

.logo-title {
	height: 150upx;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	margin-left: 20upx;
}

.uer-name {
	height: 60upx;
	line-height: 60upx;
	font-size: 38upx;
	color: #ffffff;
}

.go-login.navigat-arrow {
	font-size: 38upx;
	color: #ffffff;
}

.login-title {
	height: 150upx;
	align-items: self-start;
	justify-content: center;
	flex-direction: column;
	margin-left: 20upx;
}

.center-list {
	background-color: #ffffff;
	// margin-top: 20upx;
	width: 750upx;
	flex-direction: column;
}

.center-list-item {
	height: 90upx;
	width: 750upx;
	box-sizing: border-box;
	flex-direction: row;
	padding: 0upx 20upx;
	align-items: center;
}

.border-bottom {
	border-bottom-width: 1upx;
	border-color: #c8c7cc;
	border-bottom-style: solid;
}

.list-icon {
	width: 42upx;
	height: 42upx;
	margin-right: 20upx;
}

.list-text {
	height: 90upx;
	line-height: 90upx;
	font-size: 28upx;
	color: #333;
	flex: 1;
	text-align: left;
}

.navigat-arrow {
	height: 90upx;
	width: 40upx;
	line-height: 90upx;
	font-size: 34upx;
	color: #555;
	text-align: right;
	font-family: texticons;
}
.center-list-item {
	height: 112upx;
}
.user_info {
	width: 100%;
	height: 106upx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	.logo-img {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	&-right {
		flex: 1;
		flex-direction: column;
		margin-left: 15upx;
		.user-name {
			display: block;
			font-size: 28upx;
			color: #fff;
		}
	}
	.user-waihao {
		font-size: 20upx;
		color: #fff;
		margin-top: 10upx;
	}
	.user-waihao-pic {
		width: 20upx;
		height: 26upx;
		margin-right: 5upx;
		vertical-align: middle;
	}
	.msg {
		width: 46upx;
		&-img {
			width: 46upx;
			height: 40upx;
		}
	}
}
.canvas-pan {
	width: 568upx;
	height: 284upx;
	// background-color: #c8c7cc;
}
.mine-links {
	background-image: url('~@/static/img/mine/link-btn-bg.png');
	// background-color: #fff;
	width: 750upx;
	height: 106upx;
	background-size: 100% 100%;
	// margin-top: -46upx;
	margin-top: -64upx;

	&-btn {
		line-height: 90upx;
		font-size: 28upx;
		color: #333;
		width: 318upx;
		text-align: center;
	}
	.line {
		color: #d8d8d8;
		margin-top: 15upx;
	}
	&-history:first-child {
		margin-left: (750upx - 318upx * 2) / 2;
	}
}
</style>
